<template>
	<div>
		<el-card class="!border-none p-4 " shadow="never">
			<div class="topTitle font-bold main-color text-2xl mb-5">
				单据类型
			</div>
			<el-row class="mt-[20px]">
				<el-col :span="8">
					<div class="main-color v-flex">
						<span>类型：</span>
						<el-radio-group v-model="radio" class="flex-1 ml-[10px]">
							<el-radio label="1" size="large">订单收款单</el-radio>
							<el-radio label="2" size="large">采购付款单</el-radio>
							<el-radio label="3" size="large">贷付付款单</el-radio>
						</el-radio-group>
					</div>
				</el-col>
			</el-row>
		</el-card>
		<el-card class="!border-none p-4 mt-[20px]" shadow="never" v-if="radio==1">
			<div class="topTitle font-bold main-color text-2xl mb-5">
				收款单
			</div>
			<el-row class="mt-[20px]">
				<el-col :span="7">
					<div class="main-color v-flex">
						<span class="w-[120px] text-right">客户ID：</span>
						<span class="v-wordBreak ml-[10px]">012010225</span>
					</div>
				</el-col>
				<el-col :span="7" class="ml-[50px]">
					<div class="main-color v-flex">
						<span class="w-[120px] text-right">PO号：</span>
						<span class="v-wordBreak ml-[10px]">012010225</span>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="7">
					<div class="main-color v-flex">
						<span class="w-[120px] text-right">销售单号：</span>
						<span class="v-wordBreak ml-[10px]">012010225</span>
					</div>
				</el-col>
				<el-col :span="7" class="ml-[50px]">
					<div class="main-color v-flex">
						<span class="w-[120px] text-right">款项类型：</span>
						<span class="v-wordBreak ml-[10px]">012010225</span>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="7">
					<div class="main-color v-flex">
						<span class="w-[120px] text-right">询价单号：</span>
						<span class="v-wordBreak ml-[10px]">012010225</span>
					</div>
				</el-col>
				<el-col :span="7" class="ml-[50px]">
					<div class="main-color v-flex">
						<span class="w-[120px] text-right">收款日期：</span>
						<span class="v-wordBreak ml-[10px]">012010225</span>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="7">
					<div class="main-color v-flex">
						<span class="w-[120px] text-right">收款银行：</span>
						<span class="v-wordBreak ml-[10px]">012010225</span>
					</div>
				</el-col>
				<el-col :span="7" class="ml-[50px]">
					<div class="main-color v-flex">
						<span class="w-[120px] text-right">实际到账金额：</span>
						<span class="v-wordBreak ml-[10px]">012010225</span>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="7">
					<div class="main-color v-flex">
						<span class="w-[120px] text-right">水单金额：</span>
						<span class="v-wordBreak ml-[10px]">012010225</span>
					</div>
				</el-col>
				<el-col :span="7" class="ml-[50px]">
					<div class="main-color v-flex v-col-top">
						<span class="w-[120px] text-right">水单截图：</span>
						<el-image style="width: 100px; height: 100px" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="cover" />
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="7">
					<div class="main-color v-flex">
						<span class="w-[120px] text-right">同一订单编码第几次收款：</span>
						<span class="v-wordBreak ml-[10px]">012010225</span>
					</div>
				</el-col>
				<el-col :span="7" class="ml-[50px]">
					<div class="main-color v-flex">
						<span class="w-[120px] text-right">收款公司名称：</span>
						<span class="v-wordBreak ml-[10px]">012010225</span>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="7" class="">
					<div class="main-color v-flex ">
						<span class="w-[120px] text-right">大写金额：</span>
						<span class="v-wordBreak ml-[10px]">人民币伍万贰仟捌佰柒拾贰元整</span>
					</div>
				</el-col>
				<el-col :span="7">
					<div class="main-color v-flex ml-[50px]">
						<span class="w-[120px] text-right">少付抬头：</span>
						<span class="v-wordBreak ml-[10px]">012010225</span>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="7" class="">
					<div class="main-color v-flex ">
						<span class="w-[120px] text-right">多付金额：</span>
						<span class="v-wordBreak ml-[10px]">人民币伍万贰仟捌佰柒拾贰元整</span>
					</div>
				</el-col>
				<el-col :span="7">
					<div class="main-color v-flex ml-[50px]">
						<span class="w-[120px] text-right">少付金额：</span>
						<span class="v-wordBreak ml-[10px]">012010225</span>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="7" class="">
					<div class="main-color v-flex ">
						<span class="w-[120px] text-right">经办人：</span>
						<span class="v-wordBreak ml-[10px]">人民币伍万贰仟捌佰柒拾贰元整</span>
					</div>
				</el-col>
				<el-col :span="7">
					<div class="main-color v-flex ml-[50px]">
						<span class="w-[120px] text-right">备注：</span>
						<span class="v-wordBreak ml-[10px]">012010225</span>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="7" class="">
					<div class="main-color v-flex ">
						<span class="w-[120px] text-right mr-[10px]">成交PI IDF：</span>
						<el-button class="w-[100px] h-[36px]" color="#0054A6" type="primary">下载</el-button>
					</div>
				</el-col>
				<el-col :span="7">
					<div class="main-color v-flex ml-[50px]">
						<span class="w-[120px] text-right  mr-[10px]">成交PI Excel：</span>
						<el-button class="w-[100px] h-[36px]" color="#0054A6" type="primary">下载</el-button>
					</div>
				</el-col>
			</el-row>
		</el-card>
		<el-card class="!border-none p-4 mt-[20px]" shadow="never" v-if="radio==1">
			<div class="topTitle font-bold main-color text-2xl mb-5">
				异常审核
			</div>
			<el-row class="mt-[20px]">
				<el-col :span="5">
					<div class="main-color v-flex">
						<span>审核：</span>
						<el-radio-group v-model="radio" class="flex-1 ml-[10px]" >
							<el-radio label="1" size="large">结算</el-radio>
							<el-radio label="2" size="large">驳回</el-radio>
						</el-radio-group>
					</div>
				</el-col>
			</el-row>
			<!-- 驳回 -->
			<el-row class="mt-[20px]" v-if="radio == 2">
				<el-col :span="5">
					<div class="main-color v-flex">
						<span>原因：</span>
						<el-input class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
			</el-row>
			<!-- end -->
		</el-card>
		<el-card class="!border-none p-4 mt-[20px]" shadow="never" v-if="radio==2 || radio==3">
			<div class="topTitle font-bold main-color text-2xl mb-5">
				付款单
			</div>
			<el-row class="mt-[20px]">
				<el-col :span="6">
					<div class="main-color v-flex">
						<span class="w-[120px] text-right">订单编码：</span>
						<el-select v-if="radio==2" class="flex-1 ml-[10px]" multiple placeholder="默认采购订单编码">
							<el-option v-for="item in options" :key="item.value" :label="item.label"
								:value="item.value" />
						</el-select>
						<el-select v-if="radio==3" class="flex-1 ml-[10px]" multiple placeholder="默认货代订单编码">
							<el-option v-for="item in options" :key="item.value" :label="item.label"
								:value="item.value" />
						</el-select>
					</div>
				</el-col>
				<el-col :span="6" class="ml-[50px]">
					<div class="main-color v-flex">
						<span class="w-[120px] text-right">款项类型：</span>
						<el-select class="flex-1 ml-[10px]" multiple placeholder="请选择">
							<el-option v-for="item in options" :key="item.value" :label="item.label"
								:value="item.value" />
						</el-select>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="6">
					<div class="main-color v-flex">
						<span class="w-[120px] text-right">付款银行：</span>
						<el-select class="flex-1 ml-[10px]" multiple placeholder="请选择">
							<el-option v-for="item in options" :key="item.value" :label="item.label"
								:value="item.value" />
						</el-select>
					</div>
				</el-col>
				<el-col :span="6" class="ml-[50px]">
					<div class="main-color v-flex">
						<span class="w-[120px] text-right">付款金额：</span>
						<el-input class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="6">
					<div class="main-color v-flex">
						<span class="w-[120px] text-right">同一订单编码第几次付款：</span>
						<el-input class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
				<el-col :span="6" class="ml-[50px]">
					<div class="main-color v-flex">
						<span class="w-[120px] text-right">大写金额：</span>
						<el-input class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="6">
					<div class="main-color v-flex">
						<span class="w-[120px] text-right">付款抬头：</span>
						<el-input class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
				<el-col :span="6" class="ml-[50px]">
					<div class="main-color v-flex">
						<span class="w-[120px] text-right">多付金额：</span>
						<el-input class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="6">
					<div class="main-color v-flex">
						<span class="w-[120px] text-right">少付金额：</span>
						<el-input class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
				<el-col :span="6" class="ml-[50px]">
					<div class="main-color v-flex">
						<span class="w-[120px] text-right">经办人：</span>
						<el-select class="flex-1 ml-[10px]" multiple placeholder="请选择">
							<el-option v-for="item in options" :key="item.value" :label="item.label"
								:value="item.value" />
						</el-select>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="6">
					<div class="main-color v-flex">
						<span class="w-[120px] text-right">备注：</span>
						<el-input class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
				<el-col :span="6" class="ml-[50px]">
					<div class="main-color v-flex">
						<span class="w-[120px] text-right">款项用途：</span>
						<el-input class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="6">
					<div class="main-color v-flex">
						<span class="w-[120px] text-right mr-[10px]">付款日期：</span>
						<el-date-picker class="flex-1" type="date" placeholder="选择日期" size="default" />
					</div>
				</el-col>
				<el-col :span="6" class="ml-[50px]">
					<div class="main-color v-flex">
						<span class="w-[120px] text-right">收款公司名称：</span>
						<el-input class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="6">
					<div class="main-color v-flex">
						<span class="w-[120px] text-right">收款银行：</span>
						<el-input class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
				<el-col :span="6" class="ml-[50px]">
					<div class="main-color v-flex">
						<span class="w-[120px] text-right">收款账号：</span>
						<el-input class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
			</el-row>
		</el-card>
		<el-row class="mt-[30px]">
			<el-button class="main-color1 w-[100px] h-[36px]" >
				<span>取消</span>
			</el-button>
			<el-button class="w-[100px] h-[36px]" color="#0054A6" type="primary">
				<span>保存</span>
			</el-button>
		</el-row>
	</div>
</template>

<script lang="ts" setup>
	const radio = ref('1')
	const options = ref<Array<any>>([
		{
			value: '1',
			label: 'Metos/Sandvik/Extec/Symons'
		},
	])
</script>

<style>
</style>